
{block name="main"}

<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
    </script>
    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="{:url('admin/index/index')}">首页</a>
        </li>

        <li>节点管理</li>
        <li class="active">节点列表</li>
    </ul><!-- .breadcrumb -->

    <div class="nav-search" id="nav-search">
        <form class="form-search">
            <span class="input-icon">
                <input type="text" placeholder="关键词" class="nav-search-input" value="" id="nav-search-input" autocomplete="off" />
                <i class="icon-search nav-search-icon"></i>
            </span>
            <span style="display: inline-block;height: 25px;cursor: pointer;" id="searchName">搜索</span>

        </form>
    </div><!-- #nav-search -->
</div>

<div class="page-content">

    <div class="row">
        <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->

            <div class="row">
                <div class="col-xs-12">
                    <div class="table-responsive">
                        <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>编号</th>
                                <th>控制器名</th>
                                <th>方法名</th>
                                <th>名称</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>

                            <tbody id="tbody">
                            {volist name='data' id='info'}
                            <tr>
                                <td>{$info.id}</td>
                                <td>{$info.controller}</td>
                                <td>{$info.method}</td>
                                <td>{$info.name}</td>
                                <td class="status" data-status="{$info.status}">
                                    {switch name="$info.status"}
                                    {case value="0"}已禁用{/case}
                                    {case value="1"}已启用{/case}
                                    {/switch}
                                </td>
                                <td>
                                    <a  role="button" style="margin: 0 10px;" class="green editForm" data-toggle="modal"> <i class="icon-edit bigger-120"></i> </a>
                                    <a href="javascript:void(0);" class="del"><span class="red"><i class="icon-trash bigger-120"></i></span>
                                    </a>
                                </td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                    </div><!-- /.table-responsive -->
                </div><!-- /span -->
            </div><!-- /row -->

        </div>
    </div><!-- /.row -->
</div><!-- /.page-content -->


<div id="modal-table" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header no-padding">
                <div class="table-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <span class="white">&times;</span>
                    </button>
                    编辑
                </div>
            </div>

            <div class="modal-body no-padding">
                <form class="form-horizontal" style="margin-top: 30px;" id="edit-form">
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="controller"> 控制器： </label>

                        <div class="col-sm-9">
                            <input type="text" id="controller" placeholder="控制器名" onblur="reController();" name="controller" class="col-xs-10 col-sm-5" />
                            <span class="help-inline col-xs-12 col-sm-7">
                        <span class="middle"></span>
                    </span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="method"> 方法： </label>

                        <div class="col-sm-9">
                            <input type="text" id="method" placeholder="方法名" onblur="reMethod();" name="method" class="col-xs-10 col-sm-5" />
                            <span class="help-inline col-xs-12 col-sm-7">
                        <span class="middle"></span>
                    </span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="name"> 名称： </label>
                        <div class="col-sm-9">
                            <input type="name" id="name" placeholder="名称" name="name" class="col-xs-10 col-sm-5" />
                            <span class="help-inline col-xs-12 col-sm-7">
                        <span class="middle"></span>
                    </span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" > 状态： </label>
                        <div class="col-sm-9">
                            <label>启用：<input  type="radio" id="start"  name="status" value="1"/></label>
                            <label style="margin-left: 20px;">禁用：<input  type="radio" id="stop"  name="status" value="0" /></label>
                        </div>
                    </div>

                    <div class="clearfix" style="margin-bottom: 30px;">
                        <div class="col-md-offset-3 col-md-9">
                            <button class="btn btn-info btn-doedit" type="button">
                                <i class="icon-ok bigger-110 edit"></i>
                                提交
                            </button>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer no-margin-top">
                <button class="btn btn-sm btn-danger pull-right" id="btn-close" data-dismiss="modal">
                    <i class="icon-remove"></i>
                    Close
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- PAGE CONTENT ENDS -->

<div class="row">
   <div class="col-md-10 col-md-offset-1" id="page_div" style="margin-top: -110px;">
       {$data->render()}
   </div>
</div>

<script>

    //删除操作
    function doDel(){
        $('.del').click(function(){
            if(confirm('你确定要删除吗？')){
                var id = $(this).parent().siblings().eq(0).html();

                $.ajax({
                    type : 'delete',
                    url : '/node/'+id,
                    datatype : 'json',
                    success : function(data){
                        if(data.status){
                            alert('删除成功');
                            $('#btn-close').click();
                            setTimeout(function(){
                                $('#shownode').click();
                            },300);
                        }else{
                            alert('删除失败');
                        }
                    },
                    error : function(){
                        alert('请求失败！');
                    }
                });
            }
        });
    }
    doDel();



    function showEditForm(){
        $('.editForm').click(function(){
            var id = $(this).parent().siblings().eq(0).html();
            var controller = $(this).parent().siblings().eq(1).html();
            var status = $(this).parent().siblings('.status').attr('data-status');
            var method = $(this).parent().siblings().eq(2).html();
            var name = $(this).parent().siblings().eq(3).html();
            $('#name').val(name);
            var flag = true;
            if(flag){
                $("<input type='hidden' id='id' name='id' value='"+id+"'>").prependTo('#edit-form');
                flag = false;
            }else{
                $('id').attr({'value':id });
            }

            if(parseInt(status)){
                $('#start').attr({'checked':'checked'});
                $('#stop').removeAttr('checked');
            }else{
                $('#stop').attr({'checked':'checked'});
                $('#start').removeAttr('checked');
            }

            $('#controller').val(controller);
            $('#method').val(method);

            $(this).attr({'href' : '#modal-table'});
        });
    }
    showEditForm();

    $(function(){
        $('#controller').focus();
    });

    function reController(){
        var controller = $('#controller').val();
        if(!/^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,30})$/.test(controller)){
            $('.middle').eq(0).html('不能包含特殊符号。1到30字符').css({'color': 'red'});
            return false;
        }else{
            $('.middle').eq(0).html('正确').css({'color': 'green'});
            return true;
        }
    }

    function reMethod(){
        var method = $('#method').val();
        if(!/^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,30})$/.test(method)){
            $('.middle').eq(1).html('不能包含特殊符号。1到30字符').css({'color': 'red'});
            return false;
        }else{
            $('.middle').eq(1).html('正确').css({'color': 'green'});
            return true;
        }
    }

    function doEdit() {
        $('.btn-doedit').click(function(){
            if(reController() && reMethod()){
                var id = $('#id').val();
                var info = $('#edit-form input').serialize();
                $.ajax({
                    type : 'put',
                    url : "/node/"+id,
                    data : info,
                    datatype : 'json',
                    success : function(data){
                        if(data.status){
                            alert('修改成功');
                            $('#btn-close').click();
                            setTimeout(function(){
                                $('#shownode').click();
                            },300);
                        }else{
                            alert('修改失败');
                        }
                    },
                    error : function(){
                        alert('请求失败！');
                    }
                });
            }
        });
    }
    doEdit();
    
    function search(){
        $('#searchName').click(function(){

            var name = $('#nav-search-input').val();

            $.ajax({
                type : 'post',
                url : "{:url('admin/nodes/ajaxListSearch')}",
                data : {'name':name},
                datatype : 'json',
                success : function (data,status) {
                    locality(data,status);
                },
                error : function () {

                }
            });
        });
    }
    search();

    function AjaxPage(page) {
        $.ajax({
            url:"{:url('/admin/nodes/ajaxListAction')}",
            type:"POST",
            data:{apage:page},
            success: function(data,status){
                console.log(data);
                locality(data,status);
            }
        });
    }

    function locality(data,status){
        var add_html = '';
        var list = data.data.data;
        var html_page = data.page;
        for (var i=0;i<list.length;i++){
            var status = '';
            if(list[i].status){
                status = '已启用';
            }else{
                status = '已禁用';
            }
            add_html += "<tr><td>"+list[i].id+"</td><td>"
                +list[i].controller+"</td><td>" +list[i].method+
                "</td><td>"+list[i].name+"</td><td class='status' data-status="+list[i].status+">"+status+"</td><td><a  role='button' style=\"margin: 0 10px;\" class=\"green editForm\" data-toggle=\"modal\"> <i class=\"icon-edit bigger-120\"></i> </a>\n" +
                "<a href=\"javascript:void(0);\" class=\"del\"><span class=\"red\"><i class=\"icon-trash bigger-120\"></i></span>\n" +
                "</a></td></tr>";
        }


        $("#tbody").html(add_html);
        $("#page_div").html(html_page);
        showEditForm();
        doDel();
    }

</script>

{/block}

